{% extends "base.html" %}

{% block subtitle %}
  Widget Repository
{% endblock subtitle %}

{% block content %}
<div ng-controller="WidgetRepository">
  {% if not iframed %}
    <h3>Oppia Widget Repository</h3>
    <br>
  {% endif %}
  <div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
      <li ng-repeat="(category, widgetList) in widgets" ng-class="{active: $index == 0}">
        <a data-toggle="tab" href="#<[category|spacesToUnderscores]>"><[category]></a>
      </li>
    </ul>
    <div class="tab-content">
      <div ng-repeat="(category, widgetList) in widgets" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
        <div class="container-fluid">
          <div class="row-fluid">

            {% if iframed %}

              <div class="accordion-group" ng-repeat="widget in widgetList">
                <div style="margin: 10px">
                  <span class="pull-right">
                    <a ng-click="previewWidget(category, $index)">
                      Preview
                    </a> |
                    <a ng-click="selectWidget(category, $index)">
                      Use
                    </a>
                  </span>
                  <h5><[widget.name]></h5>
                  <i><[widget.description]></i>
                </div>
              </div>

            {% else %}

              <ul class="thumbnails">
                <li ng-repeat="widget in widgetList" class="span3">
                  <div class="thumbnail">
  
                    <h5><[widget.name]></h5>
                    <i><[widget.description]></i>
                    <a ng-click="showCustomizeModal(category, $index)" ng-show="widget.params.length > 0">
                      Customize
                    </a>
  
                    <iframe id="widget-<[category]>-<[$index]>" frameborder="0" width="100%"></iframe>
  
                    {% if admin and not iframed %}
                      <button ng-click="editWidget(widget)">Edit this widget</button>
                    {% endif %}
  
                  </div>
                </li>
              </ul>

            {% endif %}

          </div>
        </div>
      </div>
    </div>

    <div>
      <br>
      <a ng-click="showCustomizeModal(previewCategory, previewIndex)" ng-show="widget.params.length > 0">
        Customize
      </a>
      <iframe id="widgetPreview" frameborder="0" width="100%" height="500px"></iframe>
    </div>
  </div>


  <div ui-modal class="modal hide fade" id="editWidgetModal" ng-model="editWidgetModal">
    <div class="modal-header">
      <button ng-hide="newWidgetIsBeingAdded" type="button" class="close" data-dismiss="modal" aria-hidden="true"
              ng-click="saveEditedWidget(modalWidget)">
        &times;
      </button>
      <button ng-show="newWidgetIsBeingAdded" type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
      </button>

      <h3 ng-show="newWidgetIsBeingAdded">Add new widget</h3>
      <h3 ng-hide="newWidgetIsBeingAdded">Edit this widget</h3>
    </div>

    <form name="saveWidgetForm" ng-submit="saveNewWidget(modalWidget)">
      <div class="modal-body">
        <div>
          Name: <input type="text" ng-model="modalWidget.name" name="newWidgetName" not-duplicate-widget>
          <span ng-show="saveWidgetForm.newWidgetName.$error.notDuplicateWidget" class="alert">
            This widget name is already in use.
          </span>
        </div>
        <div>
          Category: <input type="text" ng-model="modalWidget.category">
        </div>
        <div>
          Description:
          <textarea ng-model="modalWidget.description">
          </textarea>
        </div>

        <ul class="nav nav-tabs" id="modalTabs">
          <li class="active"><a data-toggle="tab" href="#code">Code</a></li>
          <li><a data-toggle="tab" href="#preview">Preview</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="code">
            Widget parameters (you can refer to these in your code as {{ "{{param_name}}" }}; do not
            use {{ "{{" }} and {{ "}}" }} anywhere else)
            <ul ng-repeat="param in modalWidget.params">
              <li ng-hide="activeInputData.name == 'modalWidget.widgetParam.' + $index" ng-click="initializeWidgetParamEditor($index)">
                <[param.name]> (<[param.type]>): <[param.default]>
              </li>

              <div ng-show="activeInputData.name == 'modalWidget.widgetParam.' + $index" style="border: 1px solid black">
                <span>Name: <input type="text" ng-model="param.name"></span>
                <span>Type:
                  <select ng-model="param.type">
                    <option value="boolean">boolean</option>
                    <option value="number">number</option>
                    <option value="string">string</option>
                  </select>
                </span>
                <br>
                <div>Description: <input type="text" ng-model="param.description"></div>
                <span>Default value:
                  <span ng-switch on="param.type">
                    <span ng-switch-when="boolean">
                      <label class="radio inline">
                        <input ng-model="param.default" value="true" type="radio">
                        True
                      </label>
                      <label class="radio inline">
                        <input ng-model="param.default" value="false" type="radio">
                        False
                      </label>
                    </span>
                    <span ng-switch-when="number">
                      <input type="number" ng-model="param.default">
                    </span>
                    <span ng-switch-default>
                      <input type="text" ng-model="param.default">
                    </span>
                  </span>
                </span>
                <br>
                <button type="button" ng-click="hideWidgetParamEditor()">Close</button>
                <button type="button" class="btn btn-danger" ng-click="deleteParam(modalWidget, $index)">Delete Parameter</button>
              </div>

            </ul>

            <button type="button" ng-hide="activeInputData.name == 'modalWidget.widgetParam.' + modalWidget.params.length" ng-click="addParam(modalWidget)">
              Add parameter
            </button>

            <div ng-show="activeInputData.name == 'modalWidget.widgetParam.' + modalWidget.params.length">
              <span>Name: <input type="text" ng-model="newParamName"></span>
              <span>Type:
                <select ng-model="newParamType">
                  <option value="boolean">boolean</option>
                  <option value="number">number</option>
                  <option value="string">string</option>
                </select>
              </span>
              <br>
              <div>Description: <input type="text" ng-model="newParamDescription"></div>
              <span>Default value:
                <span ng-switch on="newParamType">
                  <span ng-switch-when="boolean">
                    <label class="radio inline">
                      <input ng-model="$parent.newParamDefault" value="true" type="radio">
                      True
                    </label>
                    <label class="radio inline">
                      <input ng-model="$parent.newParamDefault" value="false" type="radio">
                      False
                    </label>
                  </span>
                  <span ng-switch-when="number">
                    <input type="number" ng-model="$parent.newParamDefault">
                  </span>
                  <span ng-switch-default>
                    <input type="text" ng-model="$parent.newParamDefault">
                  </span>
                </span>
              </span>
              <br>
              <button type="button" ng-click="saveParam(modalWidget)">Save parameter</button>
            </div>

            <textarea class="oppia-code" ng-model="modalWidget.raw" rows="10" required>
            </textarea>
          </div>
          <div class="tab-pane" id="preview">
            <iframe id="modalPreview" width="100%" frameborder="0"></iframe>
          </div>
        </div>
      </div>

      <div class="modal-footer" ng-show="newWidgetIsBeingAdded">
        <input type="submit" class="btn" value="Save">
      </div>
    </form>

  </div>


  {% if admin and not iframed %}

    <div class="container-fluid">
      <div class="row-fluid">
        <button class="btn btn-large btn-success" ng-hide="newWidgetIsBeingAdded" type="button" ng-click="addWidget()">
          Add new widget
        </button>
      </div>
    </div>

  {% endif %}

  <div ui-modal class="modal hide fade" id="customizeModal" ng-model="modalShown">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
      </button>
      <h3 id="customizeModalLabel">Customize this widget</h3>
    </div>
    <div class="modal-body">
      <p>
        Enter parameters below to customize your widget:
      </p>
      <form>
        <div ng-repeat="param in widgets[customizeCategory][customizeIndex].params">
          <[param.name]>:
          <span ng-switch on="param.type">
            <span ng-switch-when="boolean">
              <label class="radio inline">
                <input ng-model="customizedParams[param.name]" value="true" type="radio">
                True
              </label>
              <label class="radio inline">
                <input ng-model="customizedParams[param.name]" value="false" type="radio">
                False
              </label>
            </span>
            <span ng-switch-when="number">
              <input type="number" ng-model="customizedParams[param.name]" placeholder="<[param.default]>">
            </span>
            <span ng-switch-default>
              <input type="text" ng-model="customizedParams[param.name]" placeholder="<[param.default]>">
            </span>
          </span>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <a class="btn" ng-click="submitCustomization()">Submit</a>
      <a class="btn" data-dismiss="modal" ng-click="closeCustomizeModal()">Close</a>
    </div>
  </div>

</div>

<script>
  var WidgetRepositoryConfig = {};
  {% if interactive %}
    WidgetRepositoryConfig['interactive'] = true;
  {% endif %}
</script>

{% endblock %}
